<template>
  <div class="app-container" style="padding:20px">
    <el-card>
      <template #header>
<!--        <AmFormHeader title="互联网查询详情" @cancel="closeThisPage" />-->
        <AmDetailHeader title="互联网查询详情" @cancel="closeThisPage"/>
      </template>
      <el-divider content-position="left">基础信息</el-divider>
      <el-descriptions border>
        <el-descriptions-item label="业务号">{{ detailData.YWH }}</el-descriptions-item>
        <el-descriptions-item label="权利人">{{ detailData.QLR }}</el-descriptions-item>
        <el-descriptions-item label="义务人">{{ detailData.YWR }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ detailData.SQSJ }}</el-descriptions-item>
        <el-descriptions-item label="事项名称">{{ detailData.SXMC }}</el-descriptions-item>
        <el-descriptions-item label="办理结果">{{ detailData.BLJG }}</el-descriptions-item>
        <el-descriptions-item label="办理状态">
          <el-tag>{{ BLZTLabel(detailData.BLZT) }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="left">流程明细</el-divider>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in detailData.LCMX"
          :key="index"
          :timestamp="activity.WCSJ">
          {{ LCJDLabel(activity.LCJD) }} <el-tag size="mini">{{ JDZTLabel(activity.JDZT) }}</el-tag>
        </el-timeline-item>
      </el-timeline>
      <el-divider content-position="left">附件信息</el-divider>
      <div style="display: flex;justify-content: end;margin-bottom: 12px;">
        <el-button type="primary" icon="el-icon-download" @click="handleDownloadFile">下载附件压缩包</el-button>
      </div>
      <el-table :data="finalFJXX">
        <el-table-column prop="gCLMC" label="材料名称" />
        <el-table-column prop="gBZ" label="备注" />
        <el-table-column label="附件详情">
          <el-table-column prop="XSMC" label="显示名称" />
          <el-table-column prop="ZSMC" label="真实名称" />
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import AmFormHeader from "@/components/AmComp/AmFormHeader.vue";
import AmDetailHeader from "@/components/AmComp/AmDetailHeader.vue";
import {BLZTOptions, LCJDOptions, JDZTOptions} from "@/views/am/amRemoteQuery/model";

export default {
  components: {AmDetailHeader, AmFormHeader},
  data() {
    return {
      detailData: {
          id: '123',
          "YWH": "业务号", //不可为空
          "QLR": "权利人", //不可为空
          "YWR": "义务人", //不可为空
          "SQSJ": "申请时间", //不可为空
          "SXMC": "事项名称", //不可为空
          "BLJG": "办理结果", //不可为空
          "BLZT": "1", //不可为空，仅显示当前状态，字典表详见下方
          "LCMX": [{
            "LCJD": "1", //字典表详见下方
            "JDZT": "1", //字典表详见下方
            "WCSJ": "完成时间"
          }],
          "FJXX": [{
            "ID": "附件表主键ID",
            "CLMC": "材料名称",
            "BZ": "备注",
            "FJXQ": [
              {
                "ID": "附件表主键ID",
                "IID": "附件ID",
                "XSMC": "显示名称",
                "ZSMC": "真实名称"
              }
            ]
          }],
          "FJURL": "压缩包下载路径"
        }
    }
  },
  computed: {
    finalFJXX() {
      const array = []
      this.detailData.FJXX.forEach(group => {
        group.FJXQ.forEach(item => {
          array.push({
            gID: group.ID,
            gCLMC: group.CLMC,
            gBZ: group.BZ,
            ...item,
          })
        })
      })
      return array;
    },
    BLZTLabel() {
      return status => BLZTOptions.find(item => item.value === status).label
    },
    LCJDLabel() {
      return status => LCJDOptions.find(item => item.value === status).label
    },
    JDZTLabel() {
      return status => JDZTOptions.find(item => item.value === status).label
    },
  },
  methods: {
    handleDownloadFile() {
      window.open(this.detailData.FJURL, '_blank');
    },
    closeThisPage() {
      this.$tab.closeOpenPage({path: '/am/amDescription'});
    },
  }
}
</script>
